<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pangtang --Game detail--</title>
    <link rel="stylesheet" href="css/game_info.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/effect.js"></script>
    <!-- <script src="js/fadeIn.js"></script> -->
</head>

<body class="preload">
    <!-- Start of navigation section -->
    <nav class="clearfix">
        <a href="index.html"><img class="logo" src="img/logo.png" alt="logo"></a>

        <input type="checkbox" id="toggle">
        <label for="toggle" class="iconfont icon-toggle"></label>
        <i class="iconfont icon-icons- fr nav_wechat"></i>
        <ul class="navbar fr">
                <li><a href="index.html">
                        <h2>Home </h2><span>ホーム</span>
                    </a> </li>
                <li class="active"><a href="game.html">
                        <h2>Game</h2><span>ゲーム</span>
                    </a> </li>
                <li><a href="case.html">
                        <h2>Case</h2><span>ケース</span>
                    </a> </li>
                <li><a href="#">
                        <h2>About Us</h2><span>本社について</span>
                    </a> </li>
                    <li><a href="account.html">
                            <h2>Account</h2><span>アカウント</span>
                        </a> </li>
            </ul>

    </nav>
    <!-- End of navigation section -->



    <div class="section">
        <div class="phone fade-in-l">
            <img src="img/phone2.png" alt="phone" class="phone_img">
            <div class="carousel" id="carousel">
                <div class="carousel_frame" id="carousel_frame">
                    <ul class="carousel_bar clearfix" id="carousel_bar">
                        <li><img src="img/game1.png" alt="game1"></li>
                        <li><img src="img/game2.png" alt="game2"></li>
                        <li><img src="img/game3.png" alt="game3"></li>
                        <li><img src="img/game2.png" alt="game4"></li>
                    </ul>
                </div>

                <ul class="dot" id="dot">
                    <li class="active"><i class="iconfont icon-dot"></i></li>
                    <li><i class="iconfont icon-dot"></i></li>
                    <li><i class="iconfont icon-dot"></i></li>
                    <li><i class="iconfont icon-dot"></i></li>
                </ul>
            </div>


        </div>
        <div class="game_detail fade-in-r">
            <h2 class="game_name">Game Name</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sapiente repellat, illo
                quidem sit repellendus expedita quia deserunt id corporis quas deleniti necessitatibus animi! Ab
                quisquam distinctio quidem sit eaque.</p>
            <ul class="game_detail_panel">
                <li><a href="">Add to Favorites</a> </li>
                <li><a href=""> Make this game</a></li>
                <li><a href=""> Buy</a></li>
            </ul>
        </div>
        <div class="game_detail2">
            <div class="detail2_content">
                <div class="icon_box">
                    <i class="iconfont icon-time"></i>
                    <h4>Time</h4>
                    <p>2014-07-09</p>
                </div>
                <div class="icon_box">
                    <i class="iconfont icon-jinlingyingcaiwangtubiao24"></i>
                    <h4>Price</h4>
                    <p>2333</p>
                </div>
                <div class="icon_box">
                    <i class="iconfont icon-star"></i>
                    <h4>Used</h4>
                    <p>20</p>
                </div>
                <div class="icon_box">
                    <i class="iconfont icon-folder"></i>
                    <h4>Size</h4>
                    <p>1034KB</p>
                </div>
            </div>





        </div>

    </div>


    <div class="content_frame">

        <!-- Start of step -->
        <section class="step_section clearfix">
            <h2 class="how_to">How To Use</h2>
            <div class="step fl">
                <img src="img/step1.png" alt="">
                <h2>STEP ONE</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit?</p>
            </div>
            <i class="iconfont icon-Arrowright fl"></i>
            <div class="step fl">
                <img src="img/step2.png" alt="">
                <h2>THE SECOND STEP</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit?</p>
            </div>
            <i class="iconfont icon-Arrowright fl"></i>
            <div class="step fl">
                <img src="img/step3.png" alt="">
                <h2>THE THIRD STEP</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit?</p>
            </div>
        </section>
        <!-- End of step -->
    </div>














    <footer>

        <img src="img/footer_cane.png" alt="cane" class="footer_cane">
        <img src="img/bg_tower.png" alt="tower" class="footer_tower">
        <p>Copyright © 2014 Pangtang. All Rights Reserved. </p>
    </footer>


</body>

</html>